<template>
	<view class="container" :data-theme="theme">
		<view class="header">
			<view class="header-select">
				<view style="display: flex;flex-flow: row;margin-right: 20rpx;">
					<picker @change="warehouseChange" @cancel="warehouseCancel" @click="warehouseClick"
						:value="warehouseIndex" :range="warehouseList" range-key="depotName" style="display: flex;">
						<view style="display: flex;">
							<view style="font-size: 14px;margin-right: 6rpx;" v-if="isWarehouse">仓库选择
							</view>
							<view style="font-size: 14px;margin-right: 6rpx;" v-else='isWarehouse'>
								{{ warehouseList[warehouseIndex].depotName }}
							</view>
							<u-icon :name="warehouseShow ? 'arrow-down-fill' : 'arrow-up-fill'" size="12"></u-icon>
						</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="content">
			<!-- 这里是可滚动的内容 -->
			<scroll-view class="scroll-view" scroll-y @scrolltolower="handleScroll">
				<view class="scroll-view-inner">
					<warehouseProductCard ref="productRefs"></warehouseProductCard>
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	import {
		setThemeColor
	} from '../../../utils/setTheme';
	import {
		queryDepotInformationApi
	} from "@/api/qualityTest.js"
	import warehouseProductCard from "./warehouseProductCard.vue"
	let app = getApp()
	export default {
		components: {
			warehouseProductCard
		},
		data() {
			return {
				bgColor: "#fff",
				theme: app.globalData.theme,
				// ---------------------仓库搜索----------------------------
				isWarehouse: true, // 仓库方式展示
				warehouseIndex: 0, // 验收索引值
				warehouseList: [], // 仓库信息
				warehouseShow: true, // 验收列表显示

			}
		},
		onLoad(options) {
			this.bgColor = setThemeColor()
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
		},
		created() {
			// this.initData(true)
			this.getQueryDepotInformation()
		},
		methods: {
			// 初始化数据
			initData(status) {
				this.$nextTick(() => {
					this.$refs.productRefs.getTicketUploadList(status)
				})

			},
			// 加载列表
			handleScroll() {
				this.$refs.productRefs.handleScroll()
			},
			// 仓库搜索事件
			warehouseChange(e) {
				this.isWarehouse = false
				this.warehouseIndex = e.detail.value
				this.warehouseShow = true
				// 搜索仓库事件
				this.$refs.productRefs.searchDepotId(this.warehouseList[this.warehouseIndex].depotId)
			},
			// 仓库取消事件
			warehouseCancel() {
				this.warehouseShow = true
			},
			// 仓库点击事件
			warehouseClick() {
				this.warehouseShow = false
			},
			// 获取仓库列表
			async getQueryDepotInformation() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				try {
					let result = await queryDepotInformationApi()
					if (result.code == 200) {
						this.warehouseList = result.data.list
						this.warehouseList.unshift({
							depotId: 0,
							depotName: '全部'
						})
					} else {
						uni.showToast({
							title: result.message,
							icon: 'none',
							duration: 1500
						})
					}
					setTimeout(() => {
						uni.hideLoading()
					}, 300)
				} catch (e) {
					setTimeout(() => {
						uni.hideLoading()
					}, 300)
					//TODO handle the exception
					this.$util.Tips({
						title: e
					})
					console.log(e)
				}
			},
		}
	}
</script>
<style lang="scss" scoped>
	page {
		height: 100%;


	}

	.container {
		// display: flex;
		// flex-direction: column;
		// height: 100%;
	}

	.header {

		// -------------------头部搜索--------------------
		.header-select {
			display: flex;
			align-items: center;
			padding: 20rpx;
			background-color: white;
		}
	}

	.content {
		flex: 1;
		overflow: hidden;
	}

	.scroll-view {
		height: 100%;
	}

	.scroll-view-inner {}
</style>